<template>
	<div class="trainGetList train">
		<!--搜索-->
		<div class="trainGetList_searchBox">
			<div @click="clickReturn" class="trainGetList_return">
				<img src="../../../assets/film/fanhui@3x.png" alt=""/>
			</div>
			<div class="trainGetList_search">
				<!--<input type="text" v-model="keyWord" :placeholder="placeholder" @input="search"/>-->
				<input type="text" v-model="keyWord" :placeholder="placeholder"/>
				<div class="trainGetList_search_pic">
					<img src="../../../assets/film/search.png" alt=""/>
				</div>
			</div>
		</div>
		<div class="trainGetList_zhan"></div>
		<div class="trainGetList_null" v-show="!(list.length || keyWord === '')">
			抱歉，暂未搜索到相关的信息
		</div>
		<div class="trainGetList_content">
			<div v-for="item in list" @click="getChoose(item)">
				{{item.name || item.schoolName || item.cityName}}
			</div>
		</div>
	</div>
</template>
<style scoped>
	.trainGetList_zhan {
		height: 100px;
		width: 100%;
	}
	
	.trainGetList_searchBox {
		width: 100%;
		box-sizing: border-box;
		height: 88px;
		padding: 0 35px;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.trainGetList_return {
		width: 25px;
		height: 44px;
		margin-right: 30px;
	}
	
	.trainGetList_return > img {
		width: 100%;
		height: 100%;
	}
	
	.trainGetList_search {
		height: 100%;
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		top: 0;
		left: 0;
	}
	
	.trainGetList_search > input {
		width: 540px;
		height: 60px;
		background-color: #f4f5f9;
		border: 0;
		outline: none;
		font-size: 26px;
		box-sizing: border-box;
		border-radius: 30px;
		padding-left: 64px;
	}
	
	.trainGetList_search_pic {
		width: 27px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: absolute;
		left: 18px;
		top: 0;
	}
	
	.trainGetList_search_pic > img {
		width: 100%;
		height: 27px;
	}
	
	.trainGetList_content {
		width: 100%;
		padding-left: 30px;
		box-sizing: border-box;
		background-color: #fff;
	}
	
	.trainGetList_content > div {
		height: 70px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 2px solid #d7d7d7;
		font-size: 26px;
		color: #333333;
	}
	.trainGetList_content > div:last-child {
		border:0;
	}
	
	.trainGetList_null {
		display: flex;
		justify-content: center;
		font-size: 28px;
		color: #000;
		/*background-color: #fff;*/
		padding-top: 15px;
	}
</style>
<style type="text/css">
	body {
		background: #F4F5F9!important;
	}
</style>
<script>
	export default {
		name: "trainGetList",
		data() { //数据
			return {
				sign: -1,//页面标识
				provinces: [{ //省份列表
					name: "北京",
					code: "11"
				}, {
					name: "天津",
					code: "12"
				}, {
					name: "河北",
					code: "13"
				}, {
					name: "山西",
					code: "14"
				}, {
					name: "内蒙古",
					code: "15"
				}, {
					name: "辽宁",
					code: "21"
				}, {
					name: "吉林",
					code: "22"
				}, {
					name: "黑龙江",
					code: "23"
				}, {
					name: "上海",
					code: "31"
				}, {
					name: "江苏",
					code: "32"
				}, {
					name: "浙江",
					code: "33"
				}, {
					name: "安徽",
					code: "34"
				}, {
					name: "福建",
					code: "35"
				}, {
					name: "江西",
					code: "36"
				}, {
					name: "山东",
					code: "37"
				}, {
					name: "河南",
					code: "41"
				}, {
					name: "湖北",
					code: "42"
				}, {
					name: "湖南",
					code: "43"
				}, {
					name: "广东",
					code: "44"
				}, {
					name: "广西",
					code: "45"
				}, {
					name: "海南",
					code: "46"
				}, {
					name: "重庆",
					code: "50"
				}, {
					name: "四川",
					code: "51"
				}, {
					name: "贵州",
					code: "52"
				}, {
					name: "云南",
					code: "53"
				}, {
					name: "西藏",
					code: "54"
				}, {
					name: "陕西",
					code: "61"
				}, {
					name: "甘肃",
					code: "62"
				}, {
					name: "青海",
					code: "63"
				}, {
					name: "宁夏",
					code: "64"
				}, {
					name: "新疆",
					code: "65"
				}],
				placeholder:"搜索城市区间",
				list:[],//渲染的数组
				resList:[],//结果总数组
				resListBei:[],//备份数组
				keyWord:"",//搜索
			}
		},
		mounted() {
			this.sign = this.$route.query.sign || 0;
			document.body.scrollTop = 0;//防止跳转滚动条不正确
			document.documentElement.scrollTop = 0;
		},
		created() {
			
		},
		watch: {
			sign() { // 0 学校省份  1学校名称  2家乡所在城市  3学校所在城市
				if (this.sign == 0) {
					this.placeholder = "搜索省份";
					this.list = JSON.parse(JSON.stringify(this.provinces));
					this.resList = JSON.parse(JSON.stringify(this.provinces));
					this.resListBei = JSON.parse(JSON.stringify(this.provinces));
					return;
				} else if (this.sign == 1) {
					this.placeholder = "输入学校名称";
					var url = "tctrain/train/getSchool";
					var param = {method:"getSchool"};
				} else {
					var url = "tctrain/train/getCityByStudent";
					var param = {method:"getCityByStudent"};
				};
				this.getList(url,param);
			},
			keyWord(){
				var list = JSON.parse(JSON.stringify(this.resListBei));
				if (this.keyWord === "") { //无搜索
					this.resList = list;
				} else {
					this.list.length = 0;
					this.resList.length = 0;
					list.forEach((item)=> {
				        var name = item.name || item.schoolName || item.cityName;
			        	(name.indexOf(this.keyWord) >= 0) && this.resList.push(item);
			      	},this);
			      	document.body.scrollTop = 0;
					document.documentElement.scrollTop = 0;
				};
				this.list = (this.resList.length > 100) ? this.resList.slice(0, 100) : this.resList;
			},
		},
		methods: {
			clickReturn(){
				this.$router.go(-1);
			},
			search(){//搜索
//				console.log(this.keyWord);
				var list = JSON.parse(JSON.stringify(this.resListBei));
				if (this.keyWord === "") { //无搜索
					this.resList = list;
				} else {
					this.list.length = 0;
					this.resList.length = 0;
					list.forEach((item)=> {
				        var name = item.name || item.schoolName || item.cityName;
			        	(name.indexOf(this.keyWord) >= 0) && this.resList.push(item);
			      	},this);
			      	document.body.scrollTop = 0;
					document.documentElement.scrollTop = 0;
				};
				this.list = (this.resList.length > 100) ? this.resList.slice(0, 100) : this.resList;
			},
			getChoose(item){ //选择
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));//上页面状态
				if (this.sign == 0) { //学校省份
					trainStore.operatePassenger.value.schoolProvince = item;
				} else if (this.sign == 1) { //学校名称 
					trainStore.operatePassenger.value.schoolName.name = item.schoolName;
					trainStore.operatePassenger.value.schoolName.code = item.schoolCode;
				} else if (this.sign == 2) { //家乡所在城市
					trainStore.operatePassenger.value.homeCity.name = item.cityName;
					trainStore.operatePassenger.value.homeCity.code = item.cityCode;
				} else if (this.sign == 3) { //学校所在城市
					trainStore.operatePassenger.value.schoolCity.name = item.cityName;
					trainStore.operatePassenger.value.schoolCity.code = item.cityCode;
				} else {};
				this.$store.commit('TRAINSTORE', trainStore);
				this.$router.go(-1);
			},
			getList(url,param){//获取信息
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + url, param).then((res) => {
					this.$loading.hide();
//					console.log(res);
					if(res.data.Code == "0") {
						this.resListBei = res.data.Result.schoolList || res.data.Result.cityList;
						this.resList = JSON.parse(JSON.stringify(this.resListBei));
						this.list = this.resList.slice(0, 100);
						this.$publicMethod.onReachBottom(this.onReachBottom); //下拉加载开启
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			onReachBottom() { //下拉加载
				let current = this.list.length;
				let all = this.resList.length;
				(current < all) && (this.list.push(...this.resList.slice(current, current + 10)));
			},
		},
		components: {

		},
	};
</script>